<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Title</title>
</head>
<body>
    <div>
        <h1>The Ajax 02 Page</h1>
        <button onclick="doAjaxGet()">Do Ajax Get</button>
        <button onclick="doAjaxPost()">Do Ajax Post</button>
        <button onclick="doAjaxDelete()">Do Ajax Delete</button>
        <button onclick="doAjaxPut()">Do Ajax Put</button>
    </div>
    <div id="result">

    </div>
    <script>
// Ajax Get 请求方式应用，此方法主要用于服务端获取数据
        function doAjaxGet() {
            let xhr=new XMLHttpRequest();
            xhr.onreadystatechange=function () {
                if(xhr.readyState==4){
                    if(xhr.status==200){//status==200表示服务端请求处理过程没问题
                        document.getElementById("result").innerHTML=
                            xhr.responseText;//获取服务端响应到客户端的文本信息
                    }
                }
            }
            xhr.open("GET","http://localhost/doAjaxGet",true);
            xhr.send(null)
        }

        function doAjaxPost() {
            let xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4) {
                    if (xhr.status == 200) {//status==200表示服务端请求处理过程没问题
                        document.getElementById("result").innerHTML =
                            xhr.responseText;//获取服务端响应到客户端的文本信息
                    }
                }
            }
            //当做一个添加操作或者向服务器提交的数据比较多时可以考虑post请求
            xhr.open("POST", "http://localhost/doAjaxPost", true);
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
            xhr.send("id=200&name=xiaomi&remark=very good")//post请求数据要写道send方法内部
        }

        function doAjaxDelete() {
            let xhr=new XMLHttpRequest();
            xhr.onreadystatechange=function () {
                if(xhr.readyState==4){
                    if(xhr.status==200){//status==200表示服务端请求处理过程没问题
                        document.getElementById("result").innerHTML=
                            xhr.responseText;//获取服务端响应到客户端的文本信息
                    }
                }
            }
        xhr.open("delete","http://localhost/doAjaxDelete/200",true);
        xhr.send(null)
    }
        function doAjaxPut() {
         let xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function () {
              if (xhr.readyState == 4) {
                  if (xhr.status == 200) {//status==200表示服务端请求处理过程没问题
                       document.getElementById("result").innerHTML =
                           xhr.responseText;//获取服务端响应到客户端的文本信息
                   }
                }
            }
         //当做一个更新操作，可以考虑put请求
         xhr.open("Put", "http://localhost/doAjaxPut", true);
         xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
         xhr.send("id=200&name=iphone&remark=nice")//put请求数据要写道send方法内部
}
    </script>
</body>
</html>